<template>
  <div class="hello">
    <div class="common_center">
      <div class="map_all">
        <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin" :events="events"
          class="amap-demo">
           <el-amap-bezier-curve v-for="line in lines" v-bind:key="line.id"  :events="line.events" :path="line.path" :stroke-color="line.strokeColor" :stroke-style="line.strokeStyle" :stroke-opacity="line.strokeOpacity"></el-amap-bezier-curve>
          <el-amap-marker vid="component-marker" :position="componentMarker.position" :events="componentMarker.events" ></el-amap-marker>
        </el-amap>
        <div class="toolbar">
          <button @click="getMap()">get map</button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { AMapManager } from 'vue-amap'
let amapManager = new AMapManager()
export default {
  data: function() {
    return {
      amapManager,
      zoom: 13,
      center: [113.685502, 34.631236],
      lines: [
        {
          id: 1,
          path: [
            [113.685155,34.631546],
            [113.682065,34.635289],
            [113.678632,34.636843],
            [113.677602,34.637972],
            [113.67434,34.643057],
            [113.670564,34.652095],
            [113.662667,34.665509],
            [113.657003,34.685697],
            [113.656831,34.699246],
            [113.657518,34.70221],
            [113.657346,34.737061]
          ],
          strokeDasharray: [10, 10],
          strokeColor: '#FF33FF', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 3, //线宽
          strokeStyle: 'solid', //线样式
          events: {
            click: () => {
              alert('东线')
            }
          }
        }
      ],
      componentMarker: {
        position: [113.685502, 34.631236],
        events: {
          click: () => {
            // alert('click marker')
          }
        }
      },
      events: {
        init: o => {
          // console.log(o.getCenter())
          // console.log(this.$refs.map.$$getInstance())
          // o.getCity(result => {
          //   console.log(result)
          // })
        },
        moveend: () => {},
        zoomchange: () => {},
        click: e => {
          // alert('map clicked')
        }
      },
      plugin: [
        {
          pName: 'ToolBar',
          position: 'RB',
          events: {
            init(o) {
              // console.log(o)
            }
          }
        },
        {
          pName: 'Geolocation',
          buttonPosition: 'LB',
          zoomToAccuracy: true,
          timeout: 10000,
          maximumAge: 10000,
          events: {
            init(o) {
              // o 是高德地图定位插件实例
            }
          }
        },
        {
          pName: 'Scale',
          position: 'LB',
          events: {
            init(o) {
              // console.log(o)
            }
          }
        },
        {
          pName: 'MapType',
          defaultType: 0,
          position: 'RB',
          events: {
            init(o) {
              console.log(o)
            }
          }
        }
      ]
    }
  },

  methods: {
    getMap() {
      // amap vue component
      console.log(amapManager._componentMap)
      // gaode map instance
      console.log(amapManager._map)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
